<template>
	<view>
		<view>
			<!-- <swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true"
				:circular="true" :autoplay="false" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url"  class="swiper-image" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false"
						objectFit="cover" v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper> -->
			<view class="banner-swiper-box">
				<swiper class="banner-carousel shopro-selector-rect" circular :autoplay="true">
					<swiper-item v-for="(item, index) in swiperList" :key="index" class="carousel-item" @tap="jump(item.appPath,{id:item.url})">
						<image class="swiper-image " :src="item.url" lazy-load></image>
					</swiper-item>
				</swiper>
				<view class="banner-swiper-dots">
					<text :class="cardCur === index ? 'banner-dot-active' : 'banner-dot'"
						v-for="(dot, index) in swiperList.length" :key="index"></text>
				</view>
			</view>
			<view class="bg-white margin meun">
				<view class="cu-list grid col-5 no-border">
					<view class="cu-item">
						<view class="img-box">
							<image src="../../static/img/yylc.png"></image>
						</view>
						<text class="text-bold text-xl">预约练车</text>
					</view>
					<view class="cu-item">
						<view class="img-box1">
							<image src="../../static/img/next_hj.png"></image>
						</view>
					</view>
					<view class="cu-item">
						<view class="img-box">
							<image src="../../static/img/home_sign.png"></image>
						</view>
						<text class="text-bold text-xl">签到排号</text>
					</view>
					<view class="cu-item">
						<view class="img-box1">
							<image src="../../static/img/next_hj.png"></image>
						</view>
					</view>
					<view class="cu-item">
						<view class="img-box">
							<image src="../../static/img/smrc.png"></image>
						</view>
						<text class="text-bold text-xl">扫码入场</text>
					</view>
				</view>
				<view class="cu-btn block bg-blue margin radius lg" style="border-radius: 10rpx; margin-top: 0;">点击预约</view>
			</view>
		</view>
		<view class="notice margin x-bc">
			<view class="x-bc">
				<text class="cuIcon-noticefill margin-right-xs"></text>
				<view class="more-t">近期受新型肺炎的影响，全国多地发声暂停驾考首府萨克利夫就是垃圾</view>
			</view>
			<view class="cuIcon-right"></view>
		</view>
		<view class="cu-bar bg-white  x-bc">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				<text class="text-xl text-bold">练习视频</text>
			</view>
			<view class="text-gray margin-right">查看更多<text class="cuIcon-right"></text></view>
		</view>

		<view class="cu-card article video">
			<view class="cu-item" v-for="(item,index) in videoList" :key="index">
				<view class="content">
					<image :src="item.imgUrl" mode="aspectFill"></image>
					<view class="desc">
						<view class="text-content">{{item.title}}</view>
						<view class="text-gray">
							时间：{{item.time}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="problem">
			<view class="cu-bar bg-white x-bc">
				<view class="action">
					<text class="cuIcon-title text-blue"></text>
					<text class="text-xl text-bold">热点问题</text>
				</view>
				<view class="text-gray margin-right">查看更多<text class="cuIcon-right"></text></view>
			</view>
			<view class="cu-list menu no-border">
				<view class="cu-item"  v-for="(item,index) in problemList" :key="index">
					<view class="content x-start">
						<text class="cuIcon-title text-gray"></text>
						<text class="text-grey more-t">{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 菜单导航 -->
		<view class="grid-meun x-bc padding-sm">
			<view class="tongz-box">
				<view class="tongz">
					<image src="../../static/img/tongz.png"></image>
				</view>
				<view class="zix">
					<image src="../../static/img/zix.png"></image>
				</view>
			</view>
			<view class="kefu">
				<image src="../../static/img/kefu.png"></image>
			</view>
		</view>
		
		<!-- 底部导航占位 -->
		<view class="cu-tabbar-height"></view>
		<!-- 底部导航 -->
		<yk-tabbar :pageCur="0"></yk-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardCur: 0,
				swiperList: [{
						id: 0,
						type: 'image',
						url: '../../static/img/banner.png'
					},
					{
						id: 1,
						type: 'image',
						url: '../../static/img/banner2.png'
					},
					// {
					// 	id: 2,
					// 	type: 'image',
					// 	url: '../../static/img/banner2.png'
					// },
					// {
					// 	id: 3,
					// 	type: 'image',
					// 	url: '../../static/img/banner3.png'
					// }
				],
				dotStyle: true,
				towerStart: 0,
				direction: '',
				videoList:[
					{
						imgUrl:'../../static/img/dcrk.png',
						title:'科目二倒车入库',
						time:'2020-8-25'
					},
					{
						imgUrl:'../../static/img/cftc.png',
						title:'科目三加减档操作',
						time:'2020-8-25'
					}
				],
				problemList:[
					{
						id:0,
						title:'为什么退款没有到帐？'
					},
					{
						id:1,
						title:'练完预约圈数，如何续练？'
					},
				]
			}
		},
		onLoad() {
			this.TowerSwiper('swiperList');
		},
		methods: {
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},
		}
	}
</script>

<style lang="less" scoped>
	page{
		background: #fff;
	}
	.banner-swiper-box,
	.banner-carousel {
		width: 100%;
		height: 500rpx;
		position: relative;
		// border-bottom-left-radius: 10%;
		// border-bottom-right-radius: 10%;
		overflow: hidden;

		.carousel-item {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.swiper-image {
			width: 100%;
			height: 100%;
			border-bottom-left-radius: 5%;
			border-bottom-right-radius: 5%
		}
	}
	
	.banner-swiper-dots {
		display: flex;
		position: absolute;
		left:88rpx;
		transform: translateX(-50%);
		bottom: 120rpx;
		z-index: 66;
	
		.banner-dot {
			width: 14rpx;
			height: 14rpx;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 50%;
			margin-right: 10rpx;
		}
	
		.banner-dot-active {
			width: 30rpx;
			height: 14rpx;
			background: #fff;
			border-radius: 16rpx;
			margin-right: 10rpx;
		}
	}
	
	.banner-img-box {
		margin: 0 25rpx;
		border-radius: 80rpx;
		border-radius: 30rpx;
		overflow: hidden;
	}
	// .screen-swiper{
	// 	height: 450rpx;
	// }
	.swiper-image{
		border-bottom-left-radius: 5%;
		border-bottom-right-radius: 5%
	}
	.uni-swiper .uni-swiper-dots-horizontal{
		left: 0;
		bottom: 160px;		
	}
	.meun{
		margin-top: -100upx;
		position: absolute;
		width: calc(100% - 60rpx);
		border-radius: 16upx;
		// box-shadow: 10px 10px px #888888;
		box-shadow:0px 4px 10px #eee;
		.cu-list{
			border-radius: 16upx;
			width: 100%;
		}
	}
	.cu-list.grid>.cu-item uni-text{
		color: #333;
	}
	.img-box {
		padding: 0 10upx;
		image {
			display: block;
			width: 70upx;
			height: 70upx;
			margin: auto;
		}
	}
	.img-box1{
		padding: 0 10upx;
		image {
			display: block;
			width: 100upx;
			height: 26upx;
			margin: auto;
			margin-top: 40upx;
		}
	}
	.notice{
		background: #FDF7DD;
		color:#F1A94D;
		margin-top: 240rpx;
		border-radius: 40rpx;
		padding: 16rpx;
		.cuIcon-noticefill,
		.cuIcon-right{
			font-size: 36rpx;
		}
		.more-t{
			-webkit-line-clamp:1
		}
	}

	.cu-card.article.video>.cu-item{
		margin: 0;
		.text-content{
			color: #333;
			font-size: 30rpx;
			font-weight: 600;
		}
	}
	.problem .cu-list.menu>.cu-item{
		min-height: 60rpx;
		.more-t{
			-webkit-line-clamp:1;
			width: calc(100% - 60rpx);
		}
	}
	.problem .cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after{
		border: none;
	}
	
	.grid-meun{
		width: 100%;
		.tongz-box{
			width: 50%;
			padding-right: 12rpx;
			height: 320rpx;
			.tongz{
				width: 100%;
				padding-bottom: 12rpx;
				height: 160rpx;
				border-radius: 12rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.zix{
				width: 100%;
				padding-top: 12rpx;
				height: 160rpx;
				border-radius: 12rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.kefu{
			width: 50%;
			padding-left: 12rpx;
			height: 320rpx;
			border-radius: 12rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	
</style>
